<script>
    import goodsApi from '../../../src/api/goods';
    const data = {
        filter : {
            sale : true,
            status : 0,
            keyword : ''
        },
        page : {
            current : 1,
            total : 0,
            capacity : 20
        },
        goodsList : [],
    };

    export default {
        data() {
            data.filter = {
                sale : true,
                status : 0,
                keyword : ''
            };
            data.page = {
                current : 1,
                capacity : 10
            };
            this.updateGoodsList();
            return data;
        },
        watch : {
            filter:{
                handler(){this.updateGoodsList();},
                deep:true
            }
        },
        methods: {
            updateGoodsList() {
                api.goods.ajaxList.submit({
                    data : {
                        sale : data.filter.sale,
                        status : data.filter.status,
                        keyword : data.filter.keyword,
                        page : data.page.current,
                        capacity : data.page.capacity
                    },
                    success(result) {
                        data.goodsList.splice(0,data.goodsList.length);
                        data.page.total = result.total;
                        for(let x of result.list){
                            data.goodsList.push({
                                id : x.id,
                                title : x.title,
                                image : x.image,
                                price : x.price.min,
                                stockNum : x.stock,
                                saleNum : 0,
                                releaseTime : x.time
                            });
                        }
                    }
                });
                /**
                goodsApi.list({
                    sale : data.filter.sale,
                    status : data.filter.status,
                    keyword : data.filter.keyword,
                    page : data.page.current,
                    capacity : data.page.capacity
                },{
                    success(result) {
                        data.goodsList.splice(0,data.goodsList.length);
                        data.page.total = result.total;
                        for(let x of result.list){
                            data.goodsList.push({
                                id : x.id,
                                title : x.title,
                                image : x.image,
                                price : x.price.min,
                                stockNum : x.stock,
                                saleNum : 0,
                                releaseTime : x.time
                            });
                        }
                        console.log(result);
                    }
                })
                 **/
            },
            handleSizeChange(val) {
                data.page.current = 1;
                data.page.capacity = val;
                this.updateGoodsList();
            },
            handleCurrentChange(val) {
                data.page.current = val;
                this.updateGoodsList();
            },
            handleStatusChange(){
                data.filter.status = 0;
                this.$message({
                    type: 'info',
                    message: '该功能尚在开发阶段，尽请谅解！',
                    duration : 1500
                });
            }
        }
    };
</script>

<template>
    <div class="content-box">
        <el-row class="filter-tools">
            <el-col :span="18">
                <el-radio-group v-model="filter.sale" size="small">
                    <el-radio-button :label="true">在售</el-radio-button>
                    <el-radio-button :label="false">仓库</el-radio-button>
                </el-radio-group>
                <span class="title">新品/推荐</span>
                <el-select v-model="filter.status" size="small" class="status" @change="handleStatusChange">
                    <el-option :key="0" label="全部" :value="0"></el-option>
                    <el-option :key="1" label="热卖" :value="1"></el-option>
                    <el-option :key="2" label="新品" :value="2"></el-option>
                    <el-option :key="3" label="推荐" :value="3"></el-option>
                </el-select>
            </el-col>
            <el-col :span="6">
                <el-input
                        placeholder="搜索词"
                        v-model="filter.keyword"
                        icon="search"
                        size="small">
                </el-input>
            </el-col>
        </el-row>
        <el-table :data="goodsList" border class="goodList">
            <el-table-column
                    type="selection"
                    width="50">
            </el-table-column>
            <el-table-column label="宝贝名称" width="400">
                <template scope="scope">
                    <img class="image" :src="scope.row.image">
                    <span class="title">{{ scope.row.title }}</span>
                    <div style="clear: both"></div>
                </template>
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="价格">
            </el-table-column>
            <el-table-column
                    prop="stockNum"
                    label="库存">
            </el-table-column>
            <el-table-column
                    prop="saleNum"
                    label="总销量">
            </el-table-column>
            <el-table-column
                    prop="releaseTime"
                    width="110"
                    label="发布时间">
                <template scope="scope">
                    <span class="time">{{ scope.row.releaseTime }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="103">
                <template scope="scope">
                    <el-button type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-row class="pager-tools">
            <el-col :span="8" class="batch">
                <el-button type="primary" icon="share" :plain="true" size="small">批量下架</el-button>
                <el-button type="primary" icon="delete" :plain="true" size="small">批量删除</el-button>
            </el-col>
            <el-col :span="16">
                <el-pagination
                        class="page"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="page.current"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="page.capacity"
                        layout="sizes, prev, pager, next"
                        :total="page.total">
                </el-pagination>
            </el-col>
        </el-row>
    </div>
</template>

<style scoped>
    .content-box {
        padding: 30px 30px;
    }
    .filter-tools{
        padding-bottom: 20px;
    }
    .filter-tools .title{
        font-size: 12px;
        display: inline-block;
        margin-left: 5px;
        color: #999;
    }
    .filter-tools .status{
        width: 80px;
    }
    .goodList {
        font-size: 12px;
        color: #999;
    }
    .goodList .image{
        display: block;
        width: 50px;
        height: 50px;
        margin: 8px 0;
        float: left;
    }
    .goodList .title{
        color: #2a2a2a;
        display: block;
        float: right;
        width: 310px;
        height: 50px;
        margin: 8px 0;
        line-height: 25px;
    }
    .goodList .time{
        color: #999;
        display: block;
        width: 75px;
        text-align: center;
        padding: 10px 0;
    }
    .pager-tools{
        margin-top: 10px;
    }
    .pager-tools .page{
        float: right;
    }
    .pager-tools .batch{
        padding-top: 2px;
    }
</style>